<template>
	<view class="search-bar" style="position: relative;">
		<uni-row>
			<view class="uni-flex" style="justify-content: space-between; align-items: center;">
				<uni-col :span="20">
					<view style="position: relative;">
						<uni-search-bar radius="100" v-model="keyWord"
							:placeholder="`大家都在找 ${!hotKeyword.length?'鱼苗养殖':hotKeyword[0]}`" clearButton="auto"
							cancelButton="none" @confirm="onClick(classifies)">
							<uni-icons slot="searchIcon" color="#333333" size="18" type="search" />
						</uni-search-bar>
						<button class="btn-round" type="default" size="mini" @click="onClick(classifies)">搜索</button>
					</view>
				</uni-col>
				<uni-col :span="4">
					<view class="custom-weather" v-if="weather"><text :style="{color:color}">{{weather.temp}}℃</text>
						<image mode="widthFix"
							src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/home-cloudy.png"></image>
					</view>
				</uni-col>
			</view>
		</uni-row>

		<view class="uni-flex" v-if="isRecommend"
			style="-webkit-justify-content: space-between;justify-content: space-between; align-items: center; flex-wrap: nowrap;">
			<view><text class="search-tips" v-for="(item,index) in hotKeyword" :key="index"
					@click="setkeyword(item)">{{item}}</text></view>
			<view style="margin-right: 10px;"><text class="fc-white fs12" @click="onchange()"
					:style="{color:color}">换一换</text><uni-icons type="loop" :color="color" size="12"></uni-icons></view>
		</view>
	</view>
</template>

<script>
	import {
		queryWeather,
		getSearchHotKeys
	} from "@/api/user.js"
	export default {
		props: {
			classifies: {
				type: Array,
				default () {
					return []
				}
			},
			isRecommend: {
				type: Boolean,
				default () {
					return true
				}
			},
			color: {
				type: String,
				default () {
					return '#ffffff'
				}
			},
			propkeyWord: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {
				keyWord: '',
				weather: null,
				hotKeyword: [],
				list: [],
				timer: '',
			};
		},
		mounted() {
			let obj = {
				configId: ''
			}
			if (JSON.stringify(this.classifies) == JSON.stringify(['7'])) {
				obj.configId = 'CREDIT_HOT_KEY'
			} else if (JSON.stringify(this.classifies) == JSON.stringify(['4', '5'])) {
				obj.configId = 'ASSIST_HOT_KEY'
			} else if (JSON.stringify(this.classifies) == JSON.stringify(['1', '2'])) {
				obj.configId = 'LECTURE_HOT_KEY'
			} else if (JSON.stringify(this.classifies) == JSON.stringify(['3'])) {
				obj.configId = 'MOYANG_HOT_KEY'
			} else if (JSON.stringify(this.classifies) == JSON.stringify(['6'])) {
				obj.configId = 'CREDIT_HOT_KEY'
			} else if (JSON.stringify(this.classifies) == JSON.stringify(['999'])) {
				obj.configId = 'APP_HOT_KEY'
			}
			if (JSON.stringify(this.classifies) != JSON.stringify([])) {
				console.log("classifies", this.classifies)
				this.getSearchHotKeys(obj);
			}
			// const appAuthorizeSetting = uni.getAppAuthorizeSetting()
			// console.log("appauthor",appAuthorizeSetting)
			// if (appAuthorizeSetting.locationAuthorized == 'authorized') {
			// 		uni.getLocation({
			// 			type: 'wgs84'
			// 		}).then((res) => {
			// 			console.log(res)
			// 			this.queryWeather({
			// 				lat: res[1].latitude,
			// 				lon: res[1].longitude
			// 			});
			// 		})
			// }else{
				
			// }
			this.timer = setInterval(() => {
				if (!this.hotKeyword.length) {
					this.getSearchHotKeys();
				}
			}, 300000)
		},
		destroyed() {
			clearInterval(this.timer)
		},
		methods: {
			async queryWeather(options) {
				const res = await queryWeather(options);
				this.weather = res.returnObj;
				console.log('test', this.weather)
				// this.$forceUpdate()
			},
			async getSearchHotKeys(options) {
				const res = await getSearchHotKeys(options);
				this.list = res.returnObj
				this.hotKeyword = this.getKeywordArr(this.list, 3)
				// console.log(this.hotKeyword)
			},
			getKeywordArr(list, target) {
				/**
				 * @param {number[]} list - 数据
				 * @param {number} target - 获取的条数
				 */
				if (list.length <= target) {
					return list
				}
				let hot = [];
				for (let index = 0; index < list.length; index++) {
					if (hot.length >= target) return hots(hot);
					let r = Math.floor(Math.random() * list.length);
					if (hot.indexOf(r) == -1) {
						hot.push(r);
					}
				}

				function hots(params) {
					console.log("hot", params)
					return params.map(item => {
						return list[item]
					});
				}
			},
			onchange() {
				this.hotKeyword = this.getKeywordArr(this.list, 3)
			},
			onClick(e) {
				console.log("classtest", e)
				let parmas = JSON.stringify(e)
				console.log("parmas", parmas)
				if (this.keyWord == '') {
					uni.navigateTo({
						url: `../search/search?id=${parmas}`
					})
				} else {
					uni.navigateTo({
						url: `../search/searchList/searchList?keyword=${this.keyWord}&&type=${JSON.stringify(this.classifies)}`
					})
				}
			},
			setkeyword(key) {
				this.keyWord = key;
				this.onClick(this.classifies)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-weather {
		color: #ffffff;
		font-size: 40rpx;
		font-family: 'DIN';
		display: flex;
		align-items: center;
		flex-wrap: nowrap;

		image {
			width: 60rpx;
			margin-left: 6rpx;
			// margin-right: 30rpx;
		}
	}

	/* 搜索栏 */
	.search-bar /deep/ .uni-searchbar__box {
		justify-content: left !important;
	}

	.search-tips {
		padding: 2px 8px;
		height: 24px;
		line-height: 24px;
		background-color: #ffffff;
		border-radius: 20px;
		color: #505863;
		font-size: 24rpx;
		margin-left: 24rpx;
	}
</style>